<template>
  <div>
    <a v-print="printObj" style="color: #fff">确定</a>
    <div v-show="false">
      <div id="printMe">
        <div class="codes-wrap">
          <div v-for="item in detailData" :key="item.id" class="list-woper">
          <div style="width:100%;height:10mm"></div>
          <p>
            <span>{{ item.date }}</span><span style="margin-left: 10px">{{ item.realname }}制</span>
          </p>
          <div class="scan">
            <vue-qr :text="JSON.stringify({ id: item.id, EntityType: 'workOrder' })" :size="120" :margin="0"></vue-qr>
            <p class="code">{{ item.orderCode || '-' }}</p>
          </div>
          <h2 style="text-align: center; width: 100%">工单流转卡</h2>
          <div style="height: 60px"></div>
          <div class="list">
            <p>
              <span>工单编号：</span>
              <span>{{ item.orderCode || '-' }}</span>
            </p>
            <p>
              <span>关联订单：</span>
              <span>{{ item.sellOrderCode || '-' }}</span>
            </p>
            <p style="width: 100%;">
              <span>计划时间：</span>
              <span>{{ moment(item.planStartTime).format('YYYY-MM-DD HH:mm') || '-' }} ~
                {{ moment(item.planEndTime).format('YYYY-MM-DD HH:mm') || '-' }}</span>
            </p>
            <p>
              <span>物品编号：</span>
              <span>{{ item.serialNumber || '-' }}</span>
            </p>
            <p>
              <span>物品名称：</span>
              <span>{{ item.serialName || '-' }}</span>
            </p>
            <p>
              <span>规格：</span>
              <span>{{ item.serialSpecifications || '-' }}</span>
            </p>
            <p>
              <span>计划生产数量：</span>
              <span>{{ item.planProduceNum || '-' }}</span>
            </p>
            <p>
              <span>单位：</span>
              <span>{{ item.unitName || '-' }}</span>
            </p>
          </div>
          <h2 style="width: 100%;margin-top: 30px;margin-bottom: -10px;">生产任务</h2>
          <table class="table" border>
            <tr>
              <td>序号</td>
              <td>任务二维码</td>
              <td>工序名称</td>
              <td>任务时间</td>
              <td>生产人员</td>
              <td>计划数</td>
              <td>合格数</td>
              <td>不合格数</td>
            </tr>
            <tr v-for="(list, index) in item.produceOrderTaskVo" :key="index">
              <td>{{ index + 1 }}</td>
              <td> <vue-qr :text="JSON.stringify({ id: list.taskId, EntityType: 'productTask' })" :size="120"
                  :margin="0"></vue-qr></td>
              <td>{{ list.processesName || '-' }}</td>
              <td>{{ list.planStartTime + '~' + list.planEndTime || '-' }}</td>
              <td></td>
              <td>{{ list.planProduceNum || '-' }}</td>
              <td>{{ list.qualifiedNum || '' }}</td>
              <td>{{ list.unqualifiedNum || '' }}</td>
            </tr>
          </table>

        </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import print from 'vue-print-nb'
import moment from 'moment'
import vueQr from 'vue-qr'
import { getAction } from '../../../../api/manage'
export default {
  props: {
    ids: {
      type: Array,
      default: [],
    },
  },
  directives: {
    print,
  },
  data () {
    return {
      moment,
      printObj: {
        id: 'printMe',
        previewBeforeOpenCallback (vue) {
          console.log('正在加载预览窗口', vue)
        },
        previewOpenCallback (vue) {
          console.log('已经加载完预览窗口')
        },
        beforeOpenCallback (vue) {
          console.log('打开之前', vue)
          vue.printLoading = true
        },
        openCallback (vue) {
          vue.printLoading = false
          console.log('执行了打印')
        },
        closeCallback (vue) {
          console.log('关闭了打印工具')
        },
        clickMounted (vue) {
          vue.$emit('changePrint')
          console.log('点击v-print绑定的按钮了！')
        },
      },
      detailData: [],
      realname: '',
      date: ''
    }
  },
  watch: {},
  components: { vueQr },
  created () {
    this.detailData = this.ids
    let realname = JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.realname
    let date = moment(new Date()).format('YYYY-MM-DD')
    this.detailData = this.ids.map((el) => {
      let monet = el.timePeriod.split('~')
      el.planStartTime = monet[0]
      el.planEndTime = monet[1]
      el.realname = realname
      el.date = date
      return el
    })
  },
  mounted () { },
  methods: {},
}
</script>
<style lang='less' scoped>
.codes-wrap {
  height: 100vh;
  width: 100vw;
}
.list-woper{
  position: relative;
  page-break-after:always;
}
.scan {
  position: absolute;
  top: 10mm;
  right: 0;
}

.code {
  color: #000;
  font-size: 14px;
  font-weight: 500;
  margin-top: 2px;
}

.list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  p {
    width: 50%;
    color: #000;
    font-size: 16px;
    font-weight: 500;
  }
}

.table {
  margin-top: 20px;
  width: 100%;
  text-align: center;
  color: #000;
  font-size: 16px;
  font-weight: 500;

  td {
    padding: 10px;
  }
}
</style>
